<template>
  <div class="menu">
   <!-- 搜索 -->
    <div class="search">
      <van-search v-model="SearchValue" placeholder="请输入搜索关键词" shape='round' @click="toSearch"/>
    </div>
    <!--  -->
    <div class="menubox">
      <!-- 菜单左侧 -->
        <div class="menu-list">
          <div class="menu-list-item" v-for="(item ,index) in menuList" :key="index" :class='{active:activeIndex===index}' @click="clickList(index,item.type)">{{item.typeDesc}}</div>
         
        </div>
        <!-- 菜单右侧 -->
        <div class="menu-content">
          <div class="menu-products">
              <div class="menu-pro-item" v-for="(item,index) in products" :key="index" @click="toDetail(item.pid)">
                <product  :product='item'/>
              </div>
             
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import Product from '../components/Product.vue'
export default {
  components: { Product },
  data() {
    return {
      SearchValue:'',
      menuList:[],
      activeIndex:0,
      products:[],//数据
    }
  },
  created() {
    this.getProductType()
  },
  methods: {
    toSearch(){
      this.$router.push({name:'Search'})
    },
    // 获取商品类型接口
    getProductType(){
      // 如果是get请求，参数需要写在params字段，如果是post请求，参数写在data字段
        this.axios({
          method:'get',
          url:'/type',
          params:{
            appkey:'U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA='
          }
        }).then(res=>{
          // console.log('getProductType res=>',res);
          if(res.data.code==400){
            res.data.result.unshift({type:'isHot',typeDesc:'热卖推荐'})
            this.menuList= res.data.result
            // console.log( this.menuList);
            this.getProductByType(this.menuList[this.activeIndex].type);
          }
        }).catch(err=>{
          console.log('err=>',err);
        })
    },

    // 根据商品类型 获取该类型数据接口
    getProductByType(type){
      let key=''
      let value=''
      if(type==='isHot'){
        key='isHot'
        value=1
      }else{
        key='type'
        value=type
      }
      this.axios({
        methods:'get',
        url:'/typeProducts',
        params:{
          appkey:'U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=',
          key:key,
          value:value
        }
      }).then(res=>{
        // console.log('getProductByType=>res',res);
        this.products=res.data.result
        console.log('this.products',this.products);
      }).catch(err=>{
        console.log('getProductByType=>err',err);
      })
    },

    // 菜单栏列表点击事件
    clickList(index,type){
      if(this.activeIndex===index){
        return
      }
      this.activeIndex=index
      console.log(type);
      this.getProductByType(type)
    },
    // 点击跳转到详情页
    toDetail(id){
      this.$router.push({name:'Detail',params:{pID:id}})
    }
  },
}
</script>
<style lang="less">
.menu-products{
  display: flex;
  flex-wrap: wrap;
    .menu-pro-item{
      width: calc(~"50% - 5px");
      margin-right: 10px;
      margin-bottom: 15px;
      &:nth-child(2n){
        margin-right: 0px;
      }
    }
}
.search{
  position: sticky;
  top: 0;
  border-bottom: 1px solid rgb(223, 221, 221);
}
.menubox{
  position: fixed;
  top: 55px;
  left: 0;
  right: 0;
  bottom: 50px;
  display: flex;
      // 左边列表
      .menu-list{ 
      width: 80px;
      height: 100%;
      background-color: #f7f7f7;
      font-size: 16px;
      overflow-y: auto;
      text-align: center;
          .menu-list-item{
            height: 45px;
            line-height: 45px;
          }
          .menu-list-item.active{
            background-color: #fff;
            color: #0c34ba;
          }
      }
      // 右边内容
      .menu-content{
        flex: 1;
        height: 100%;
        padding: 10px;
        overflow-y: auto;
      }
}
</style>